<template>
    <div class="poker_item_box">
        <div class="poker_item_bg" :style="{color:color}">
            <div class="poker_item_type1">
                {{typeShow}}
            </div>
            <div class="poker_item_type2">
                {{typeShow}}
            </div>
            <div class="poker_item_number">
                {{numberShow}}
            </div>
        </div>
    </div>
</template>
<script>


export default {
   name :"poker",
    props : {
        type : String,  // ♥ ♦ ♠ ♣ 1234  
        number : String,
        
        
    },
    data(){
        return {
            color : String,
            numberShow : String,
            typeShow : String,
           
        }
    },
    mounted(){
        
        if(this.type=='1'){
            this.typeShow = "♥"
            this.color  = '#f30'
        }
        else if(this.type=='2'){
            this.typeShow = "♦"
            this.color  = '#f30'
        }
        else if(this.type=='3'){
            this.typeShow = "♠"
            this.color  = '#330'
        }
        else {
            this.typeShow = "♣"
            this.color  = '#330'
        }

        if(this.number=='1'){
            this.numberShow = 'A'
        }
        else if(this.number=='11'){
            this.numberShow = 'J'
        }
        else if(this.number=='12'){
            this.numberShow = 'Q'
        }
        else if(this.number=='13'){
            this.numberShow = 'K'
        }
        else {
            this.numberShow = this.number
        }
        
    }
}
</script>

<style lang="css" scoped>
    .poker_item_box {
        background-color:#fff;border-radius:5px;border:1px solid #ccc;width:100px;height:130px;
    }
    .poker_item_bg{
        
        width:100%;
        height:100%;
        position: relative;
    }
    .poker_item_type1{
        position: absolute;
        left:5px;
        top:28px;
        font-size: 18px;

    }
    .poker_item_number{
        position: absolute;
        left:5px;
        top:5px;
        font-size: 18px;

    }
    .poker_item_type2{
        position: absolute;
        left:50%;
        top:60%;
        transform: translate(-50%,-50%);
        font-size: 50px;
    }
</style>